<template>
  <div id="warntrendparent">
    <div class="left">
      <h1>每周告警趋势图</h1>
      <div class="m-topic-swiper">
        <swiper :options="swiperOption" :class="special">
          <swiper-slide v-for="(item, index) in LinesData" :key="index">
            <WarnEcharts :LinesData="item.data" />
          </swiper-slide>
          <!-- <swiper-slide>
            <WarnEcharts :LinesData="LinesData"/>
          </swiper-slide> -->
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </div>
    <div class="right">
      <WarnTrend :TrendData="TrendData" />
    </div>
  </div>
</template>
<script>
import { getTrend } from "../assets/api/twoapi";
import { getLinesData } from "../assets/api/twoapi";
import WarnEcharts from "./WarnEcharts";
import WarnTrend from "./WarnTrend";
// import VueAwesomeSwiper from "vue-awesome-swiper"
// import { Swiper, SwiperSlide } from "vue-awesome-swiper";
// import Swiper2, { Navigation, Pagination } from "swiper";
// Swiper2.use([Navigation, Pagination]);
export default {
  name: "WarnTrendParent",
  props: ["content", "special"],
  components: {
    // Swiper,
    // SwiperSlide,
    WarnTrend,
    WarnEcharts,
  },
  data() {
    return {
      TrendData: [],
      LinesData: [],
      timer: null,
      swiperOption: {
        // 可写swiper一些原生配置
        // loop: true,
        // initialSlide: 0, //设定初始化时slide的索引
        // loopAdditionalSlides: 5,
        // slidesPerView: 1,
        // observer: true, //修改swiper自己或子元素时，自动初始化swiper
        // observeParents: true, //修改swiper的父元素时，自动初始化swiper
        // loop: true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true, // 小圆点
          paginationType: "custom", //自定义-分页器样式类型（前提）
          renderBullet: (index, className) => {
            let text =
              this.LinesData &&
              this.LinesData[index] &&
              this.LinesData[index].name;
            // let text = ''
            // switch (index) {
            //   case 0:
            //     text = "北京机房";
            //     break;
            //   case 1:
            //     text = "上海机房";
            //     break;
            //   case 2:
            //     text = "昆明机房";
            //     break;
            // }
            return '<span class="text ' + className + '">' + text + "</span>";
          },
        },
        //lazyLoading: true,
        watchSlidesProgress: true,
        // autoplay: 3000 * 100,
        // speed: 600 *100,
      },
    };
  },
  mounted() {
    this.fetchData();
    this.timer = setInterval(() => {
      setTimeout(this.fetchData(), 0);
    }, 5000);
  },
  methods: {
    fetchData() {
      getTrend().then((res) => {
        this.TrendData = res.data.nums;
      });
      getLinesData().then((res) => {
        this.LinesData = res.data.result;
        // console.log(res)
        // console.log(this.LinesData)
      });
    },
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>
<style lang="less">
#warntrendparent {
  display: flex;
  justify-content: flex-start;
}
.left {
  width: 520px;
  height: 328px;
}
.right {
  width: 400px;
  height: 328px;
  margin-left: 25px;
}
h1 {
  color: #a3d7ff;
  font-size: 26px;
  text-align: center;
}
.swiper-container-horizontal > .swiper-pagination-bullets {
  top: 2px;
  left: 0;
  width: 100%;
  margin: 0;
}
.swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0;
}
.m-topic-swiper {
  .swiper-container {
    width: 100%;
    .m-topic-img {
      display: block;
      width: 100%;
    }
    .swiper-pagination {
      height: 0.23rem;
      font-family: PingFangSC-Regular;
      font-size: 0.156rem;
      color: #fff;
      letter-spacing: 0;
      line-height: 0.12rem;
      bottom: 0;
      z-index: 15;
    }
    .text {
      width: 100px;
      height: 30px;
      background: #061d5d;
      font-size: 14px;
      line-height: 30px;
      border-radius: 5.5px;
      color: #a4d6ff;
    }
    .swiper-pagination-bullet-active {
      width: 100px;
      background: #0c4c86;
      color: white;
    }
  }
}
</style>
